<template>
<div class="yanxuanP">
<header class="head">
	<div class="middleHead">
		<i class="iconfont icon-chakantiezigengduo"></i>
		<img src="/static/img/yanxuan/head.png" class="headWord">
		<div class="shoppingIcon">
			<i class="iconfont icon-gouwuche"></i>
			<i class="iconfont icon-icon"></i>
		</div>
	</div>
	<div class="nav">
		<div class="middleNav">
			<ul class="navUl">
				<li class="navLi01" @click="gostroy">故事<div class="border"></div></li>
				<li class="navLi01 navLi02" @click="godetail">好货<div class="border"></div></li>
				<li class="navLi01" @click="goserve">服务<div class="border"></div></li>
			</ul>
		</div>
		<img src="/static/img/yanxuan/navLine.png" class="navLine"/>
	</div>
</header>

<div class="content">
<!--轮播图-->
 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/static/img/yanxuan/lunbo1.jpg" alt="" class="lunboPic"/></div>
            <div class="swiper-slide"><img src="/static/img/yanxuan/lunbo2.jpg" alt="" class="lunboPic"></div>
            <div class="swiper-slide"><img src="/static/img/yanxuan/lunbo3.jpg" alt="" class="lunboPic"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
</div>

<!--热销榜-->
<div class="hot">
	<div class="hotTit">
		<p class="titleP">热销榜</p>
		<a href="#"><i class="iconfont icon-msnui-right-arrow-round"></i></a>
	</div>
	<div class="hotContent">
		<a href="#" class="top1" @click="godetail">
			<h3 class="topH">缓疼止痛 军医大理疗...</h3>
			<p class="price">139.00元</p>
			<p class="originPrice">150.00元</p>
			<p class="order"><span class="orderSpan">TOP1</span></p>
			<img src="/static/img/yanxuan/top1.png" class="top1Pic">
		</a>
		<a href="#" class="top2" @click="godetail">
			<h3 class="topH">缓疼止痛 军医大理疗...</h3>
			<p class="price">139.00元</p>
			<p class="order"><span class="orderSpan">TOP2</span></p>
			<img src="/static/img/yanxuan/top2.png" class="top2Pic">
		</a>
		<a href="#" class="top2" @click="godetail">
			<h3 class="topH">缓疼止痛 军医大理疗...</h3>
			<p class="price">139.00元</p>
			<p class="order"><span class="orderSpan">TOP3</span></p>
			<img src="/static/img/yanxuan/top3.png" class="top2Pic">
		</a>
	</div>
</div>

<!--人气推荐-->
<div class="recommend">
	<div class="recommendCont">
		<div class="reTitle">
			<p class="titleP">人气推荐</p>
			<a href="#"><i class="iconfont icon-msnui-right-arrow-round"></i></a>
		</div>
		<div class="goods">
			<ul class="goodsUl">
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/goods1.png" class="goodsPic"/>
							<span class="new">新品</span>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">正安 年货大礼盒</h2>
							<p class="giftWord">中医养生礼盒装+理疗贴组合，中医养生，超值套装</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥320.00</span>
							<p class="old">￥399.00</p>
						</div>
					</a>
				</li>
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/goods2.png" class="goodsPic"/>
							<span class="new">新品</span>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">正安 年货大礼盒</h2>
							<p class="giftWord">中医养生礼盒装+理疗贴组合，中医养生，超值套装</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥320.00</span>
							<p class="old">￥399.00</p>
						</div>
					</a>
				</li>
				<li class="goodsLi">
					<a href="#" class="module">
						<div class="imgCont">
							<img src="/static/img/yanxuan/goods3.png" class="goodsPic"/>
							<span class="new">新品</span>
						</div>
						<div class="goodsDetail">
							<h2 class="gift">正安 年货大礼盒</h2>
							<p class="giftWord">中医养生礼盒装+理疗贴组合，中医养生，超值套装</p>
						</div>
						<div class="goodsPirce">
							<span class="cheap">￥320.00</span>
							<p class="old">￥399.00</p>
						</div>
					</a>
				</li>
			</ul>
		</div>

	</div>
</div>
</div>
<foot></foot>
</div>
</template>

<script>
		import Foot from "../components/commons/Foot"
    export default {

        data() {
            return {}
        },
        components:{
					Foot
				},
        methods:{
          gostroy:function () {
            this.$router.push("/Stroy")
          },
          goserve:function () {
            this.$router.push("/Serve")
          },
          godetail:function () {
            this.$router.push("/Detail")
          }
        },
        mounted:function(){
        	$('.navLi01').click(function(){
        // 增加点击样式
        $(this).addClass('navLi02');
        // 清除其它样式
       $(this).siblings().removeClass('navLi02');
    });

     window.onload = function() {
      var mySwiper = new Swiper ('.swiper-container', {
        // 轮播图的方向，也可以是vertical方向
        direction:'horizontal',
        //播放速度
        loop: true,
        // 自动播放时间
        autoplay:5000,
        // 播放的速度
        speed:2000,
        // 如果需要分页器，即下面的小圆点
        pagination: '.swiper-pagination',
　　　　　　// 这样，即使我们滑动之后， 定时器也不会被清除
　　　　  autoplayDisableOnInteraction : false,
      });
    }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/css/YanXuanProduct.css";
@import "../assets/css/swiper-3.4.2.min.css";
</style>
